<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				position: relative;
				width: 1000px;
				height: 460px;
				margin: 20px auto;
				background:url(img/xiaomi1.jpg) no-repeat/* 不重复 */center/100% 100%;
				animation: pict 6s linear infinite;
			}
			@keyframes pict{
				0%,30%{
					background-image: url(img/xiaomi1.jpg);
				}
				
				35%,65%{
					background-image: url(img/xiaomi2.jpg);
				}
				70%,95%{
					background-image: url(img/xiaomi3.jpg);
				}
			}
			.sbox{
				position: absolute;
				right: 30px;
				bottom: 30px;
				width: 120px;
				height: 50px;
				
			}
			.sbox a{
				display: inline-block;
				width: 20px;
				height: 20px;
				border-radius: 20px;
				margin-left: 5px;
				border: 2px #c0c0c0 solid;
			}
			.sbox .dot1{
				/* background-color: #fff; */
				animation: dot1 6s linear infinite;
			}
			@keyframes dot1{
				0%,30%{
					background-color: #fff;
				}
				
				35%,95%{
					
				}
			}
			.sbox .dot2{
				
				animation: dot2 6s linear infinite;
			}
			@keyframes dot2{
				0%,30%{
					/* background-color: #fff; */
				}
				
				35%,95%{
					background-color: #fff;
				}
				70%,95%{
					
				}
			}
			.sbox .dot3{
				
				animation: dot3 6s linear infinite;
			}
			@keyframes dot3{
				0%,30%{
					/* background-color: #fff; */
				}
				
				35%,65%{
					/* background-color: #fff; */
				}
				70%,95%{
					background-color: #fff;
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="sbox">
				<a href="#" class="dot1"></a>
				<a href="#" class="dot2"></a>
				<a href="#" class="dot3"></a>
			</div>
		</div>
	</body>
</html>
